<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center submit_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub submit_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  submit_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-center submit_fd0_0_c1'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!---flex布局flex布局开始-->
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1593FF"></u-loading>
			<view>加载中</view>
		</view>
		
		<view class="score" v-else>
			<view class="score_img">
				<view class="score_text">
					<view class="">
						<text class="score_text_1">{{total.score}}</text>
						<text class="score_text_2">分</text>
					</view>
					<view class="score_text_tip">试卷已提交</view>
				</view>
			</view>
			<view class="question">
				<view class='flex flex-wrap align-center justify-center submit_fd1_0_c3'>
					<image class='submit_fd1_0_c3_c0' mode="aspectFit" :src='STATIC_URL+"33.png"'></image>
					<text class='submit_fd1_0_c3_c1'>考试概览</text>
					<image class='submit_fd1_0_c3_c2' mode="aspectFit" :src='STATIC_URL+"34.png"'></image>
				</view>
				<view class="score_information">
					<view class="information_item">
						<view class="information_item_1">
							<image :src='STATIC_URL+"136.png"' mode="aspectFill"></image>
							<text>全部题数</text>
						</view>
						<view class="information_item_2">{{total.total_num}}</view>
					</view>
					<view class="information_item">
						<view class="information_item_1">
							<image :src='STATIC_URL+"137.png"' mode="aspectFill"></image>
							<text>错误数</text>
						</view>
						<view class="information_item_3">{{total.wrong_num}}</view>
					</view>
					<view class="information_item">
						<view class="information_item_1">
							<image :src='STATIC_URL+"138.png"' mode="aspectFill"></image>
							<text>正确率</text>
						</view>
						<view class="information_item_4">{{total.correct_probability}}%</view>
					</view>
				</view>
				<view class='flex flex-wrap align-center justify-center submit_fd1_0_c3'>
					<image class='submit_fd1_0_c3_c0' mode="aspectFit" :src='STATIC_URL+"33.png"'></image>
					<text class='submit_fd1_0_c3_c1'>错题概览</text>
					<image class='submit_fd1_0_c3_c2' mode="aspectFit" :src='STATIC_URL+"34.png"'></image>
				</view>
				
				<view class="subject" v-if="radio.topid_list.length > 0">
					<view class="subject_title">
						<image :src='STATIC_URL+"29.png"' mode="widthFix"></image>
						<span>单选题（{{radio.wrong_num}}/{{radio.total_num}}）</span>
					</view>
					<view class="list">
						<view @tap.stop="goSeeTopic(item.topicmanage_id)" class="list_item" :class="item.is_correct == 0 ? 'list_item_wor' : ''" v-for="(item, index) in radio.topid_list" :key="index">{{index+1}}</view>
					</view>
				</view>
				<view class="subject" v-if="estimate.topid_list.length > 0">
					<view class="subject_title">
						<image :src='STATIC_URL+"29.png"' mode="widthFix"></image>
						<span>判断题（{{estimate.wrong_num}}/{{estimate.total_num}}）</span>
					</view>
					<view class="list">
						<view @tap.stop="goSeeTopic(item.topicmanage_id)" class="list_item" :class="item.is_correct == 0 ? 'list_item_wor' : ''" v-for="(item, index) in estimate.topid_list" :key="index">{{index+1}}</view>
					</view>
				</view>
				<view class="subject" v-if="multiset.topid_list.length > 0">
					<view class="subject_title">
						<image :src='STATIC_URL+"29.png"' mode="widthFix"></image>
						<span>多选题（{{multiset.wrong_num}}/{{multiset.total_num}}）</span>
					</view>
					<view class="list">
						<view @tap.stop="goSeeTopic(item.topicmanage_id)" class="list_item" :class="item.is_correct == 0 ? 'list_item_wor' : ''" v-for="(item, index) in multiset.topid_list" :key="index">{{index+1}}</view>
					</view>
				</view>
				
				<view class='flex flex-wrap align-center justify-between submit_fd1_0_c5'>
					<button class='submit_fd1_0_c5_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">返回</button>
					<button class='submit_fd1_0_c5_c1' @tap.stop="handleJumpDiy"
					data-type="redirectTo" :data-url="`/pages/index/wrongQuestion/wrongQuestion`">查看错题</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				practicetest_id: '499',
				type: '2',  // 1模拟  2随堂测试
				estimate: {
					topid_list: []
				},
				multiset: {
					topid_list: []
				},
				radio: {
					topid_list: []
				},
				total: {},
				isShow: true,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {practicetest_id, type} = options;
			if (practicetest_id !== undefined) this.practicetest_id = practicetest_id;
			if (type !== undefined) this.type = type;
			this.getResult();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 模拟考试结果  post6306ce0e14ba8
			getResult() {
				let url = '';
				let data = {};
				if (this.type == 1) {
					url = global.apiUrls.post6306ce0e14ba8
					data.simulation_test_log_id = this.practicetest_id
				} else {
					url = global.apiUrls.post63071e253dcba
					data.classroom_test_log_id = this.practicetest_id
				}
				this.$api.post(url, data).then(res => {
					console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.total = res.data.data.total;
						this.estimate = res.data.data.estimate;
						this.multiset = res.data.data.multiset;
						this.radio = res.data.data.radio;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			goSeeTopic(topicmanage_id) {
				uni.navigateTo({
					url: '/pages/my/skimmingChapter/recordDetails?topicmanage_id=' + topicmanage_id + '&practicetest_id=' + this.practicetest_id
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.score {
		.score_img {
			width: 614rpx;
			height: 566rpx;
			background: url(https://app.ezsdcsm.com/images/135.png) no-repeat;
			background-size: 100% 100%;
			margin: -60rpx auto 48rpx;
			position: relative;
			// padding: 130rpx 0 0;
			.score_text {
				text-align: center;
				transform: translateY(230rpx);
				.score_text_1 {
					font-weight: bold;
					font-size: 84rpx;
					color: #FF4A26;
					text-shadow: 1rpx 2rpx 7rpx rgba(255,58,52,0.67);
				}
				.score_text_2 {
					font-weight: bold;
					font-size: 38rpx;
					color: #FF4A26;
					text-shadow: 1rpx 2rpx 7rpx rgba(255,58,52,0.67);
				}
			}
			.score_text_tip {
				text-align: center;
				font-size: 33rpx;
				color: #fff;
				margin-top: 38rpx;
			}
		}
		.question {
			border-radius: 24rpx;
			border: 2rpx solid #EEF7FF;
			margin: -130rpx 32rpx 0;
			padding: 0 0 32rpx;
			background: #F7FCFF;
			.score_information {
				margin: 0 72rpx;
				display: flex;
				justify-content: space-between;
				background: #FFFFFF;
				padding: 36rpx 0 32rpx;
				.information_item {
					.information_item_1 {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						margin-bottom: 24rpx;
						image {
							width: 16rpx;
							height: 16rpx;
							margin-right: 12rpx;
						}
					}
					.information_item_2 {
						text-align: center;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						padding-left: 28rpx;
					}
					.information_item_3 {
						text-align: center;
						font-weight: bold;
						font-size: 32rpx;
						color: #FE5B22;
						padding-left: 28rpx;
					}
					.information_item_4 {
						text-align: center;
						font-weight: bold;
						font-size: 32rpx;
						color: #00C396;
						padding-left: 28rpx;
					}
				}
			}
			.subject {
				padding: 0 32rpx;
				.subject_title {
					padding: 32rpx 0 26rpx 0;
					font-size: 32rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					image {
						width: 32rpx;
						height: 20px;
						margin-right: 16rpx;
					}
				}
				.list {
					overflow: hidden;
					.list_item {
						float: left;
						margin: 0 31rpx 30rpx 0;
						width: 79rpx;
						height: 79rpx;
						background: #E2F2FF;
						border: 1px solid #71BBFF;
						font-size: 29rpx;
						font-weight: bold;
						color: #333333;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.list_item_wor {
						background: #FFDED2 !important;
						border: 1px solid #FE5014 !important;
						color: #FE5014 !important;
					}
					.list_item:nth-child(6n+6) {
						margin: 0 0 30rpx 0;
					}
				}
			}
		}
	}
	.submit_fd1_0_c4_c0_c1_x {
		margin: 16rpx 0 0 0;
	}
	.submit_fd1_0_c0 {
		margin: 32rpx 0rpx 0rpx 0rpx;
	}

	.submit_fd1_0_c0_c0 {
		width: 282rpx;
		height: 282rpx;
	}

	.submit_fd1_0_c1 {
		text-align: center;
		line-height: 50rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #1593FF;
		margin: 0rpx 0rpx 56rpx 0rpx;
	}

	.submit_fd1_0_c2 {
		border-bottom: 2px dashed #eee;
		background: #7DC3FF;
		width: 622rpx;
		height: 1rpx;
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.submit_fd1_0_c3 {
		margin: 32rpx 0rpx 32rpx 0rpx;
	}

	.submit_fd1_0_c3_c0 {
		width: 46rpx;
		height: 28rpx;
	}

	.submit_fd1_0_c3_c1 {
		margin: 0rpx 24rpx 0rpx 24rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #060606;
	}

	.submit_fd1_0_c3_c2 {
		width: 46rpx;
		height: 28rpx;
	}

	.submit_fd1_0_c4 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.submit_fd1_0_c4_c0 {
		background: #fff;
		background-size: 100% !important;
		width: 288rpx;
		padding: 32rpx 32rpx 32rpx 32rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
		margin: 0rpx 15rpx 32rpx 15rpx;
	}

	.submit_fd1_0_c4_c0_c0_c0 {
		background: rgba(21, 147, 255, 0.3900);
		background-size: 100% !important;
		width: 16rpx;
		height: 16rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.submit_fd1_0_c4_c0_c0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.submit_fd1_0_c4_c0_c1 {
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.submit_fd1_0_c4_c0_c1_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		margin: 0rpx 24rpx 0rpx 0rpx;
		white-space: pre-wrap;
	}

	.submit_fd1_0_c4_c0_c1_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
	}

	.submit_fd1_0_c4_c0_c2 {
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.submit_fd1_0_c4_c0_c2_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.submit_fd1_0_c4_c0_c2_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #FE5014;
	}

	.submit_fd1_0_c4_c0_c3_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.submit_fd1_0_c4_c0_c3_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #00C396;
	}

	.submit_fd1_0_c4_c0_c3_c2 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #00C396;
	}

	.submit_fd1_0_c5 {
		// margin: 0rpx 0rpx 32rpx 0rpx;
		padding: 24rpx 40rpx 0rpx 40rpx;
	}

	.submit_fd1_0_c5_c0 {
		border: 1px solid #2C8FFF;
		background: transparent;
		background-size: 100% !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-size: 28rpx;
		color: rgba(44, 143, 255, 1);
		width: 280rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.submit_fd1_0_c5_c1 {
		background: rgba(44, 143, 255, 1);
		background-size: 100% !important;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 28rpx;
		color: #fff;
		width: 280rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.submit_flex_1 {
		background: url(https://app.ezsdcsm.com/images/31.png) no-repeat, transparent;
		background-size: 100% !important;
		margin: 0rpx 32rpx 0rpx 32rpx;
		background-size: 100% auto !important;
		padding-bottom: 32rpx;
		border-radius: 0 0 28rpx 28rpx;
		overflow: hidden;
		border-bottom: 2rpx solid #1593FF;
	}

	.submit_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.submit_fd0_0_c0_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
		line-height: 36rpx;
	}

	.submit_fd0_0_c1 {
		width: 36rpx;
		height: 36rpx;
	}

	.submit_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: url(https://app.ezsdcsm.com/images/91.png) no-repeat;
		background-size: 100% 100% !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto !important;
		padding-bottom: 32rpx;
	}
</style>
